<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>d3折线图</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/d3.v3.min.js"></script>
	<script src="js/d3-queue.v3.min.js"></script>
    <style>

        body {
            font: 10px sans-serif;
            margin: 50px;
        }

        .grid .tick {
            stroke: lightgrey;
            opacity: 0.7;
            shape-rendering: crispEdges;
        }

        .grid path {
            stroke-width: 0;
        }

        .axis path {
            fill: none;
            stroke: #bbb;
            shape-rendering: crispEdges;
        }

        .axis text {
            fill: #555;
        }

        .axis line {
            stroke: #e7e7e7;
            shape-rendering: crispEdges;
        }

        .axis .axis-label {
            font-size: 14px;
        }

        .line {
            fill: none;
            stroke-width: 1.5px;
        }

        .dot {
            /* consider the stroke-with the mouse detect radius? */
            stroke: transparent;
            stroke-width: 10px;
            cursor: pointer;
        }

        .dot:hover {
            stroke: rgba(68, 127, 255, 0.3);
        }
    </style>
</head>
<body>
<div id="trendSvg"></div>
</body>
<script type="text/javascript">


    
var colors = [
        'steelblue',
        'green',
        'red',
        'purple'
    ];

    var margin = {top: 20, right: 30, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
    //添加比例尺
    var x = d3.scale.linear()
                .range([0,w])
                .domain([1,sumperminMAIN.length]); 
    var y = d3.scale.linear()
                .range([0,h])
                .domain([50,0]);
    
    var xAxis = d3.svg.axis()
                .scale(xScale)
                .ticks(30)
                //.tickValues([60,120,180,240,300,360,420,480,540,600,660,720,780,840,900,960,1020,1080,1140,1200,1260,1320,1380,1440])
                .tickFormat(function(d){
                    console.log(d+"  "+ChangeHourMinutestr(d));
                    return ChangeHourMinutestr(d);
                })
                .orient("bottom");
    var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

    //缩放拖拽
    var zoom = d3.behavior.zoom()
            .x(x)
            .y(y)
            .scaleExtent([-10, 10])//可缩放的范围
            .on("zoom", zoomed);

    var svg = d3.select("#trendSvg").append("svg")
            .call(zoom)
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);

    svg.append("g")
            .attr("class", "y axis")
            .append("text")
            .attr("class", "axis-label")
            .attr("transform", "rotate(-90)")
            .attr("y", (-margin.left) + 10)
            .attr("x", -height/2)
            .text('Axis Label');

    svg.append("clipPath")
            .attr("id", "clip")
            .append("rect")
            .attr("width", width)
            .attr("height", height);

    var line = d3.svg.line()
            .interpolate("linear")
            .x(function(d) { return x(d.x); })
            .y(function(d) { return y(d.y); });

    svg.selectAll('.line')
            .data(data)
            .enter()
            .append("path")
            .attr("class", "line")
            .attr("clip-path", "url(#clip)")
            .attr('stroke', function(d,i){
                return colors[i%colors.length];
            })
            .attr("d", line);


    var points = svg.selectAll('.dots')
            .data(data)
            .enter()
            .append("g")
            .attr("class", "dots")
            .attr("clip-path", "url(#clip)");

    points.selectAll('.dot')
            .data(function(d, index){
                var a = [];
                d.forEach(function(point,i){
                    a.push({'index': index, 'point': point});
                });
                return a;
            })
            .enter()
            .append('circle')
            .attr('class','dot')
            .attr("r", 2)
            .attr('fill', function(d,i){
                return colors[d.index%colors.length];
            })
            .attr("transform", function(d) {
                return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
            );

    function zoomed() {
        svg.select(".x.axis").call(xAxis);
        svg.select(".y.axis").call(yAxis);
        svg.selectAll('path.line').attr('d', line);

        points.selectAll('circle').attr("transform", function(d) {
            return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
        );
    }

     //按钮点击回复
    d3.select("button")
      .on("click",function(){
//          svg.transition()
//              .duration(750)
//              .call(zoom.transform, d3.zoomIdentity);
            svg.transition()
             .duration(750)
             .attr("transform","translate("+0+")scale("+1+")")  ;
        });  

}


   </script>
<script type="text/javascript">
    var data =  [
        [{'x':1,'y':0},{'x':2,'y':5},{'x':3,'y':10},{'x':4,'y':0},{'x':5,'y':6},{'x':6,'y':11},{'x':7,'y':9},{'x':8,'y':4},{'x':9,'y':11},{'x':10,'y':2}],
        [{'x':1,'y':1},{'x':2,'y':6},{'x':3,'y':11},{'x':4,'y':1},{'x':5,'y':7},{'x':6,'y':12},{'x':7,'y':8},{'x':8,'y':3},{'x':9,'y':13},{'x':10,'y':3}],
        [{'x':1,'y':2},{'x':2,'y':7},{'x':3,'y':12},{'x':4,'y':2},{'x':5,'y':8},{'x':6,'y':13},{'x':7,'y':7},{'x':8,'y':2},{'x':9,'y':4},{'x':10,'y':7}],
        [{'x':1,'y':3},{'x':2,'y':8},{'x':3,'y':13},{'x':4,'y':3},{'x':5,'y':9},{'x':6,'y':14},{'x':7,'y':6},{'x':8,'y':1},{'x':9,'y':7},{'x':10,'y':9}],
        [{'x':1,'y':4},{'x':2,'y':9},{'x':3,'y':14},{'x':4,'y':4},{'x':5,'y':10},{'x':6,'y':15},{'x':7,'y':5},{'x':8,'y':0},{'x':9,'y':8},{'x':10,'y':5}]
    ];

    var colors = [
        'steelblue',
        'green',
        'red',
        'purple'
    ];

    var margin = {top: 20, right: 30, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

    var x = d3.scale.linear()
            .domain([0, 12])
            .range([0, width]);

    var y = d3.scale.linear()
            .domain([-1, 16])
            .range([height, 0]);

    //x轴设置
    var xAxis = d3.svg.axis()
            .scale(x)
            .ticks(10)//调节刻度大小
            .tickSize(-height)
            .tickPadding(10)
            .tickSubdivide(true)
            .orient("bottom");

    //y轴设置
    var yAxis = d3.svg.axis()
            .scale(y)
            .tickPadding(10)
            .tickSize(-width)
            .tickSubdivide(true)
            .orient("left");

    //缩放拖拽
    var zoom = d3.behavior.zoom()
            .x(x)
            .y(y)
            .scaleExtent([-10, 10])//可缩放的范围
            .on("zoom", zoomed);

    var svg = d3.select("#trendSvg").append("svg")
            .call(zoom)
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);

    svg.append("g")
            .attr("class", "y axis")
            .append("text")
            .attr("class", "axis-label")
            .attr("transform", "rotate(-90)")
            .attr("y", (-margin.left) + 10)
            .attr("x", -height/2)
            .text('Axis Label');

    svg.append("clipPath")
            .attr("id", "clip")
            .append("rect")
            .attr("width", width)
            .attr("height", height);

    var line = d3.svg.line()
            .interpolate("linear")
            .x(function(d) { return x(d.x); })
            .y(function(d) { return y(d.y); });

    svg.selectAll('.line')
            .data(data)
            .enter()
            .append("path")
            .attr("class", "line")
            .attr("clip-path", "url(#clip)")
            .attr('stroke', function(d,i){
                return colors[i%colors.length];
            })
            .attr("d", line);


    var points = svg.selectAll('.dots')
            .data(data)
            .enter()
            .append("g")
            .attr("class", "dots")
            .attr("clip-path", "url(#clip)");

    points.selectAll('.dot')
            .data(function(d, index){
                var a = [];
                d.forEach(function(point,i){
                    a.push({'index': index, 'point': point});
                });
                return a;
            })
            .enter()
            .append('circle')
            .attr('class','dot')
            .attr("r", 2)
            .attr('fill', function(d,i){
                return colors[d.index%colors.length];
            })
            .attr("transform", function(d) {
                return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
            );

    function zoomed() {
        svg.select(".x.axis").call(xAxis);
        svg.select(".y.axis").call(yAxis);
        svg.selectAll('path.line').attr('d', line);

        points.selectAll('circle').attr("transform", function(d) {
            return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
        );
    }
</script>
</html>
